<template>
	<view class="content">
		<view class="section-0">
			<view class="section" v-if="!show">
				<view class="progress">
					<view class="top">
						<view class="left">{{analysis.project_amount_total}}<text>/{{analysis.project_budget_total}}万元</text></view>
						<view class="right">{{analysis.fee}}</view>
					</view>
					<view class="bottom">
						<view  class="value" :style="{width: `${analysis.fee}`}">
						</view>
					</view>
				</view>
			</view>
			<view class="section-body">
				<view class="problem-wrapper" v-if="show">
					<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
					<view class="">~ 空空如也 ~</view>
				</view>
				
				<timeLine :list="list"></timeLine>
			</view>
		</view>
		
	</view>
</template>

<script>
const riskMap = {
	// project_name: {
	// 	name: '项目定义',
	// 	filter: (val) => val
	// },
	project_name: {
		name: '项目名称',
		filter: val => val
	},
	project_dy_level: {
		name: '电压等级',
		filter: val => val
	},
	// work_name: {
	// 	name: '建设阶段',
	// 	filter: (val) => val
	// },
	project_budget: {
		name: '不含税预算（万）',
		filter: val => val
	},
	project_amount: {
		name: '不含税发生额合计（万）',
		filter: val => val
	},
	budget_rate: {
		name: '预算执行率',
		filter: val => val
	},
	start_time_real: {
		name: '预算差额',
		filter: val => val
	},
	budget_margin: {
		name: '预算差额占比',
		filter: val => val
	},
	remark: {
		name: '备注',
		filter: val => val
	}
}
import { project_budgetfoApi } from '@/api/statistics.js'
import { mapGetters } from 'vuex'
import timeLine from '../../../../../../components/time_line/index.vue'
export default {
	components: {
		timeLine
	},
	data() {
		return {
			show:true,
			name: '',
			id: '',
			list: [],
			analysis: {},
		}
	},
	computed: {
		...mapGetters({
			curProject: 'system/getCurProject'
		})
	},
	methods: {
		async fetchData() {
			uni.showLoading({
				title: '加载中...'
			})

			const { data } = await project_budgetfoApi({
				project_id: this.curProject.id,
			})
			uni.hideLoading()
			if (data.code === 1) {
				let arr = []
				let res = data.data
				for (let key in res) {
					let item = {}
					if (riskMap[key]) {
						item = {
							title: riskMap[key].name,
							content: {
								type: 'text',
								value: riskMap[key].filter(res[key])
							}
						}
						arr.push(item)
					}
				}
				this.list = arr
				this.list.map(res=>{
					if(res.title=="不含税预算（万）"){
						this.analysis.project_budget_total=res.content.value
					}
					if(res.title=="不含税发生额合计（万）"){
						this.analysis.project_amount_total=res.content.value
					}
					if(res.title=="预算执行率"){
						this.analysis.fee=res.content.value
					}
					
				})
				if(this.list.length>0){
					this.show=false
				}
			}
		}
	},
	onReady() {
		this.fetchData()
	}
}
</script>

<style lang="scss" scoped>
.section-0 {
	width: 100%;
	background-color: #3a5df5;
	height: 150rpx;
	.section-body {
		position: relative;
		top: -50rpx;
		padding-top: 50rpx;
		box-sizing: border-box;
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 100rpx;
		background-color: #fff;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
	}
	.problem-wrapper {
		color: #808080;
		margin: 0 auto;
		text-align: center;
		image {
			margin-top: 300rpx;
			width: 200rpx;
			height: 200rpx;
		}
	}
	.section{
		width: 100%;
		padding-left: 40rpx;
		height: 150rpx;
		padding-right: 40rpx;
		padding-bottom: 50rpx;
		background-color: #1534ce;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		overflow: hidden;
		box-sizing: border-box;
		.progress{
			width: 100%;
			.bottom{
				width: calc(100% - 4rpx);
				margin-left: 2rpx;
				height: 14rpx;
				background-color: #fff;
				border: 2rpx solid #fff;
				border-radius: 8rpx;
				.value{
					// width: 80%;
					height: 100%;
					background-color: #0535d6;
					border-radius: 8rpx;
				}
			}
			.top{
				width: 100%;
				padding-top: 10rpx;
				height: 54rpx;
				line-height: 64rpx;
				.left{
					float: left;
					font-weight: light;
					font-size: 26rpx;
					color: #ffffff;
					text{
						font-size: 16rpx;
					}
				}
				.right{
					float: right;
					font-weight: bold;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
	}
}
</style>
